<template>
  <div>
    <div id="attribute-table" class="foot-table attribute-table">
      <div class="tablename">分析结果属性表</div>
<!--      2023年3月24日 LQ 绥化 这个不允许导出-->
      <el-button class="table-btn-right" @click="outputshp()" type="warning" plain size="small" v-if="false">导出分析结果图形</el-button>
<!--      <el-button class="statics" @click="Statics" type="success" plain size="small">统计</el-button>-->
<!--      <el-button class="closeAttr" @click="UnBindUIEvent" type="primary" plain size="small">关闭</el-button>-->
      <el-table
          :data="attributeTable.config.fields.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
          style="width: 100%"
          :stripe="true"
          :header-cell-style="{background:'#c3efb1',color:'#63666b'}"
          height="250"
          border fit>
        <el-table-column
            v-for="(item,i) in attributeTable.config.tablecols"
            :sortable="item.title!=='备注'"
            :label="item.title"
            :prop="item.field"
            :min-width="(item.title).length*35"
            show-overflow-tooltip>
        </el-table-column>

        <el-table-column
            fixed="right"
            label="操作"
            width="100">
          <template slot-scope="scope">
            <el-button @click="LocateItem(scope.row)" type="text" size="small">定位</el-button>
<!--            <el-button @click="SelctItem(scope.row)" type="text" size="small">选中</el-button>-->
          </template>
        </el-table-column>
      </el-table>
      <div id="page" class="block" v-if="false">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="attributeTable.currentPage"
            :page-sizes="attributeTable.pageSizes"
            :page-size="attributeTable.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total=attributeTable.config.dataSize>
        </el-pagination>
      </div>
      <OutputShp v-if="CCshow.outputShp" :CCshow="CCshow" :features="attributeTable.features"></OutputShp>
    </div>


  </div>
</template>

<script>
import axios from "axios";
// import AnalysisStatistic from "./AnalysisStatistic";
import globalmf from '@/utils/Global/GlobalMapFunction'
import Bus from '@/utils/bus'
import OutputShp from '@/components/Map/OutputShp'

export default {
  name: "AttributeTable",
  data() {
    return {
      attributeTable: {
        features: null,
        prj: null,
        showCatalogAttrTable: false,
        showCenter: true,
        analysisStaticsShow: 'allClose',
        tableHeaders: [],
        tableData: [],
        map: null,
        serviceId: "",
        selectFeature: null,
        tableRender: null,
        config: {
          dataSize: 6,
         // features: null,
          fields: [],
          tablecols: [{
            field: "intersetName",
            title: "相交面积",
            align: 'center'
          }],
          analysisFields: [],
          centerFeature: null
        },
        pageSizes: [10, 20, 30],
        pageSize: 30,
        currentPage: 1,
      },
      CCshow:{outputShp:false},
      search: '',
      selectStyle: new ol.style.Style({
        fill: new ol.style.Fill({
          color: 'rgba(250,250,250,0)'
        }),
        stroke: new ol.style.Stroke({
          color: '#00ff08', //'#d74a4a',
          width: 2
        }),
        image: new ol.style.Circle({
          radius: 7,
          fill: new ol.style.Fill({
            color: '#62ff00'
          })
        })
      }),
    }
  },
  components: {
    // AnalysisStatistic
    OutputShp,
  },
  props: {
    //注意，只有对象。数组这些引用类型可以子改父，值类型不可以。
    mcShow: {//mapCore传递回来的参数,只用到了显示隐藏的按钮。
      type: Object,
      default() {
        return {
            attributeShow:'',
        }
      }
    },
    tableconfig: {
      type: Array,
      default() {
        return []
      }
      },
    overSource: {
      type: Object,
      default() {
        return {}
      }
    },

  },
  created() {//mounted函数相当于Init

    //分析属性表
    Bus.$on('intAttributeTable', msg => {
      this.intAttributeTableFun(msg)
    });
    if(this.tableconfig.length>0){
      this.intAttributeTableFun(this.tableconfig)
    }
  },
  mounted() {
  },
  beforeDestroy() {
    Bus.$off("intAttributeTable");
  },
  methods: {
    intAttributeTableFun(msg){
      let that = this;
      that.mcShow.attributeShow = "attribute";
      that.attributeTable.currentPage = 1;
      that.attributeTable.pageSize = 100000;
      that.attributeTable.pageSizes = [100000, 2000000];
      that.attributeTable.showCatalogAttrTable = false;
      that.attributeTable.features = msg[0];
      that.attributeTable.config.analysisFields = msg[1];
      that.attributeTable.map = msg[2];
      // that.attributeTable.config.centerFeature = msg[3];
      //
      // that.attributeTable.serviceId = msg[4];

      that.attributeTable.config.dataSize = that.attributeTable.features.length;

      that.attributeTable.selectFeature = new ol.interaction.Select({
        condition: ol.events.condition.click,
        layers: that.attributeTable.map.getLayers()
      });
      that.InitTableTols();
      that.getCurrentPageData();
    },
    InitTableTols() {
      let that = this;
      that.attributeTable.config.tablecols = [];//表头 字段名称列表
      for (var i in that.attributeTable.config.analysisFields) {
        var field = that.attributeTable.config.analysisFields[i];
        var fieldEn = field["f_field"];
        var fieldCn = field["f_fieldcn"];
        var isvisible = field["f_isvisible"];
        if (field['f_isvisible'] != 0) {
          var col = {
            field: fieldEn,
            title: fieldCn,
            align: 'center'
          }
          that.attributeTable.config.tablecols.push(col);
        }
      }
      //相交面积
      var intersetName = "smarea";
      if (that.attributeTable.features[0].getProperties().hasOwnProperty(intersetName)) {
        var intersectCol = {
          field: intersetName,
          title: "相交面积",
          align: 'center'
        }
        that.attributeTable.config.tablecols.push(intersectCol);
      }
    },
    getCurretnCatalogPageData() {
      let that = this;
      that.attributeTable.config.fields = [];//所有feature的属性列表
      for (var i in that.attributeTable.features) {
        var feature = that.attributeTable.features[i];
        var keys = feature.getKeys();
        for (var j in keys) {
          if (keys[j] != "geometry" && keys[j] != keys[j].toLowerCase()) {
            feature.set(keys[j].toLowerCase(), feature.get(keys[j]));
            feature.unset(keys[j]);
          }
        }
        var attributes = feature.getProperties();
        that.attributeTable.config.fields.push(attributes);
      }
    },
    getCurrentPageData() {
      let that = this;
      that.attributeTable.config.fields = [];//所有feature的属性列表

      let start = 1;
      for (var i in that.attributeTable.features) {
        if (start > that.attributeTable.pageSize * (that.attributeTable.currentPage - 1) && start < that.attributeTable.pageSize * that.attributeTable.currentPage + 1) {
          var feature = that.attributeTable.features[i];
          var keys = feature.getKeys();
          for (var j in keys) {
            if (keys[j] != "geometry" && keys[j] != keys[j].toLowerCase()) {
              feature.set(keys[j].toLowerCase(), feature.get(keys[j]));
              feature.unset(keys[j]);
            }
          }
          var attributes = feature.getProperties();
          that.attributeTable.config.fields.push(attributes);
        }
        start++;
      }
    },
    handleSizeChange(val) {
      let that = this;
      that.attributeTable.pageSize = val;
     // console.log(`每页 ${val} 条`);
      that.getCurrentPageData();
    },
    handleCurrentChange(val) {
      let that = this;
      that.attributeTable.currentPage = val;
     // console.log(`当前页: ${val}`);
      if (that.attributeTable.showCatalogAttrTable) {//目录树的属性表翻页 需要sql查询
        var params = [that.attributeTable.currentPage, that.attributeTable.pageSize, that.attributeTable.prj];
        Bus.$emit('updateAttrTablePage', params)
      } else {//分析的属性表直接有结果 翻页 只是显示 无需查询
        that.getCurrentPageData();
      }
    },
    UnBindUIEvent() {
      let that = this;
      that.mcShow.attributeShow = "allClose";
      Bus.$emit('setMapBottom', "0px");
    },
    LocateItem(row) {
      var geometry = row.geometry;
    //  Bus.$emit('LocateGeometry', geometry);
      this.LocateGeometry(geometry);
    },
    SelctItem(row) {
      var geometry = row.geometry;
      Bus.$emit('SelctGeometry', geometry);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    LocateGeometry(geo){
      let that=this;
      var extent = geo.getExtent();
      globalmf.zoomToExtent(that.attributeTable.map, extent);
      var fea = new ol.Feature({
        geometry: geo,
      });
      //fea.set("featureid", that.selectFeatureId);
      fea.setStyle(that.selectStyle);
      // that.overSource.forEachFeature(function (feature) {
      //   if (feature.get("featureid") == that.selectFeatureId) {
      //     that.overSource.removeFeature(feature);
      //   }
      // });
      that.overSource.addFeature(fea);
    },
    outputshp(){
      this.CCshow.outputShp=true;
    },
    Statics() {
      this.attributeTable.analysisStaticsShow = 'analysisStatics'
    },
  },
}
</script>

<style scoped>
.table-btn-right{
  float: right;
}
.tablename{
  float: left;
  font-size: 20px;
}
/*::v-deep .el-table__header tr .el-table__header th {*/
/*  padding: 0;*/
/*  height: 30px;*/
/*}*/
::v-deep .el-table__header-wrapper{
  padding: 3px 0;
  /*height: 30px;*/
}
::v-deep .el-table--medium .el-table__cell {
  padding: 5px 0;
}

.attribute-table {
  /*position: absolute;*/
  /*left: 0px;*/
  /*right: 0px;*/
  /*bottom: 0px;*/
  /*background-color: #ffffff;*/
  /*max-height: 350px;*/
  overflow: auto;

}

#page {
  background-color: #008680 !important;
  border-color: #ccc !important;
}

.el-button.statics {
  margin: 5px;
}

.el-table .sort-caret.descending {
  border-top-color: #636570 !important;
}

.el-table .sort-caret.ascending {
  border-bottom-color: #636570 !important;
}
</style>
